import React, { Component } from 'react'
import { SearchBar } from 'antd-mobile'
import {getCurrentCity } from '../../../utils/baiduMap'
import styles from './index.module.scss'
import { getareaCommunity } from '../../../api'
export default class Search extends Component {
    /* 
    传递小区数据：

    1 给搜索列表项添加单击事件。
    2 在事件处理程序中，调用 history.replace() 方法跳转到发布房源页面。
    3 将被点击的小区信息作为数据一起传递过去。

    4 在发布房源页面，判断 history.loaction.state 是否为空。
    5 如果为空，不做任何处理。
    6 如果不为空，则将小区信息存储到发布房源页面的状态中。
  */

   // 定时器id
   timerId = null
  constructor(props){
    super(props)
   this.state = {
      // 搜索框的值
      searchTxt: '',
      tipsList: [],
      cityId:''
    }
  }
  onTipsClick = item => {
    const {history} = this.props
    history.push({ 
      pathname: '/rent/add', 
      state: {  
       name: item.communityName,
       id: item.community
      } 
    })
  }
    // 渲染搜索结果列表
    renderTips = () => {
      const { tipsList } = this.state
  
      return tipsList.map(item => (
        <li
          key={item.community}
          className={styles.tip}
          onClick={() => this.onTipsClick(item)}
        >
          {item.communityName}
        </li>
      ))
    }
 async componentDidMount(){
    // 调用封装的百度地图数据
    const res = await getCurrentCity()
    console.log('我是定位',res);
    this.setState({
      cityId:res.value
    })
  }
   /* 
    关键词搜索小区信息
  */
    handleSearchTxt = value => {
      this.setState({ searchTxt: value })
  
      if (!value) {
        // 文本框的值为空
        return this.setState({
          tipsList: []
        })
      }
  
      // 清除上一次的定时器
      clearTimeout(this.timerId)
  
      this.timerId = setTimeout(async () => {
        let params= {
          name: value,
          id: this.state.cityId
        }
        const res = await getareaCommunity(params)
  
        // console.log(res)
  
        this.setState({
          tipsList: res.data.body
        })
      }, 500)
    }
  render() {
    const { history } = this.props
    const { searchTxt } = this.state
    // 搜索小区页面
    return (
      <div className={styles.root}>
        {/* 搜索框 */}
        <SearchBar
          placeholder="请输入小区或地址"
          value={searchTxt}
          onChange={this.handleSearchTxt}
          showCancelButton={true}
          onCancel={() => history.replace('/rent/add')}
        />

        {/* 搜索提示列表 */}
        <ul className={styles.tips}>{this.renderTips()}</ul>
      </div>
    )
  }
}
